import React from 'react';
import Svg, {G, Path, Defs, ClipPath, Rect} from 'react-native-svg';
import {BasicsProps} from './type';

type Props = {
  size: string;
  fill?: string;
} & BasicsProps;

const CancelOutIcon = ({size,fill = '#333333'}:Props) => {
  return (
    <Svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none">
      <G
        id="&#230;&#179;&#168;&#233;&#148;&#128;&#232;&#180;&#166;&#230;&#136;&#183;"
        clip-path="url(#clip0_36_567)">
        <Path
          id="Combined-Shape"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M16.334 2C19.723 2 22 4.378 22 7.916V16.084C22 19.622 19.723 22 16.333 22H7.665C4.276 22 2 19.622 2 16.084V7.916C2 4.378 4.276 2 7.665 2H16.334ZM16.334 3.5H7.665C5.135 3.5 3.5 5.233 3.5 7.916V16.084C3.5 18.767 5.135 20.5 7.665 20.5H16.333C18.864 20.5 20.5 18.767 20.5 16.084V7.916C20.5 5.233 18.864 3.5 16.334 3.5ZM10.1305 9.0626L11.998 10.93L13.8645 9.0647C14.1575 8.7717 14.6315 8.7717 14.9245 9.0647C15.2175 9.3577 15.2175 9.8317 14.9245 10.1247L13.058 11.99L14.9265 13.8596C15.2195 14.1526 15.2195 14.6266 14.9265 14.9196C14.7805 15.0666 14.5875 15.1396 14.3965 15.1396C14.2045 15.1396 14.0125 15.0666 13.8665 14.9196L11.998 13.05L10.1325 14.9167C9.9865 15.0637 9.7945 15.1367 9.6025 15.1367C9.4105 15.1367 9.2185 15.0637 9.0725 14.9167C8.7795 14.6237 8.7795 14.1497 9.0725 13.8567L10.938 11.99L9.0705 10.1226C8.7775 9.8296 8.7775 9.3556 9.0705 9.0626C9.3645 8.7696 9.8385 8.7696 10.1305 9.0626Z"
          fill={fill}
        />
      </G>
      <Defs>
        <ClipPath id="clip0_36_567">
          <Rect width="24" height="24" fill="white" />
        </ClipPath>
      </Defs>
    </Svg>
  );
};


export default CancelOutIcon;
